<template>
  <div class="share-modal">
    <!-- 添加自定义模态框类名 -->
    <a-modal
      :open="visible"
      :footer="false"
      @cancel="closeModal"
      :maskClosable="false"
      class="custom-modal"
    >
    <template #title>
      <h2 style="text-align: center; font-weight: bold">批量编辑</h2>
    </template>
    <!-- 提示文字 -->
    <a-typography-paragraph type="secondary" class="tips-text">* 只对当前页面搜索展示的图片生效</a-typography-paragraph>
    <!-- 表单项 -->
    <a-form layout="vertical" :model="formData" @finish="handlePictureSubmit" class="edit-form">
      <a-form-item label="分类" name="category" class="form-item">
        <a-auto-complete
          v-model:value="formData.category"
          :options="categoryOptions"
          placeholder="请输入分类"
          allowClear
          class="form-input"
        />
      </a-form-item>
      <a-form-item label="标签" name="tags" class="form-item">
        <a-select
          v-model:value="formData.tags"
          :options="tagOptions"
          mode="tags"
          placeholder="请输入标签"
          allowClear
          class="form-input"
        />
      </a-form-item>
      <a-form-item label="命名规则" name="nameRule" class="form-item">
        <a-input
          v-model:value="formData.nameRule"
          placeholder="请输入命名规则，输入 {序号} 可动态生成"
          class="form-input"
        />
      </a-form-item>
      <a-form-item style="text-align: center; margin-top: 32px">
        <a-button type="primary" html-type="submit" class="submit-btn">提交</a-button>
      </a-form-item>
    </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, withDefaults, defineExpose, onMounted, reactive } from 'vue'
import {
  editPictureByBatchUsingPost,
  listPictureTagCategoryUsingGet
} from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

/**
 * 定义组件属性类型
 */
interface Props {
  spaceId?: number
  pictureList?: API.PictureVO[]
  onSuccess?: () => void
}
/**
 * 给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {})

// 是否可见
const visible = ref(false)

// 打开弹窗
const openModal = () => {
  visible.value = true
}

// 关闭弹窗
const closeModal = () => {
  visible.value = false
  // 清空表单
  clearForm();
}

// 重置表单数据
const clearForm = () => {
  formData.category = ''
  formData.tags = []
  formData.nameRule = ''
  formData.pictureIdList = []
}

// 暴露函数给父组件
defineExpose({
  openModal,
})

// ----------- 表单数据处理 ------------
// 表单数据初始化
const formData = reactive<API.PictureEditByBatchDTO>({
  category: '',
  tags: [],
  nameRule: ''
})

// 创建图片时表单提交
const handlePictureSubmit = async (values: any) => {
  if(!props.pictureList){
    return
  }

  const res = await editPictureByBatchUsingPost({
    pictureIdList: props.pictureList?.map((picture) => picture.id),
    spaceId: props.spaceId,
    ...values
  })

  if (res.data?.code === 0 && res.data?.data) {
    message.success('操作成功')
    // 清空表单
    clearForm();
    // 关闭弹窗
    closeModal()
    // 调用父组件传递的刷新页面
    props.onSuccess?.()
  } else {
    message.error('操作失败: ' + res.data?.message)
  }
}

// 分类标签和图片标签
const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])

// 获取分类标签和图片标签
const getPictureTagCategory = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data?.code === 0 && res.data?.data) {
    // @ts-ignore
    categoryOptions.value = (res.data.data.categoryList ?? []).map((category) => ({
      value: category,
      label: category
    }))
    // @ts-ignore
    tagOptions.value = (res.data.data.tagList ?? []).map((tag) => ({
      value: tag,
      label: tag
    }))
  } else {
    message.error('加载标签失败: ' + res.data?.message)
  }
}

// 初始化, 页面挂载时
onMounted(() => {
  // 加载标签
  getPictureTagCategory()
})

</script>

<style scoped>
/* 模态框整体样式 - 强制设置最小宽度并优化内边距 */
.share-modal {
  padding: 20px;
}

/* 自定义模态框容器 - 增加背景和圆角 */
:deep(.custom-modal .ant-modal-content) {
  min-width: 600px; /* 确保模态框宽度合适 */
  border-radius: 12px; /* 圆角边框 */
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* 模态框外部阴影 */
  padding: 24px; /* 内部留白 */
}

/* 提示文字样式 - 增加上下间距和左侧缩进 */
.tips-text {
  margin: 12px 0;
  padding-left: 8px;
  font-size: 14px;
  text-align: center;
  color: #6b7280;
}

/* 表单容器 - 增加内边距 */
.edit-form {
  padding: 10px 0;
}

/* 表单项容器 - 增加较大阴影和间距 */
.form-item {
  margin-bottom: 20px; /* 表单项之间的距离 */
  padding: 16px; /* 表单项内边距 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* 较大阴影突出表单项 */
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 表单项 hover 效果 - 增强阴影 */
.form-item:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* 输入框样式 - 优化边框和阴影 */
.form-input {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 输入框内部阴影 */
  transition: all 0.3s ease;
}

/* 输入框聚焦效果 - 高亮边框和增强阴影 */
:deep(.form-input:focus-within) {
  border-color: #52c41a; /* 浅绿色边框 */
  box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.2); /* 聚焦时的发光效果 */
}

/* 提交按钮容器 - 居中并增加阴影 */
.submit-item {
  display: flex;
  justify-content: center; /* 按钮居中 */
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  margin-top: 10px;
}

/* 提交按钮样式 - 浅绿色背景 */
.submit-btn {
  background-color: #52c41a; /* 浅绿色 */
  color: white;
  border: none;
  width: 260px;
  font-size: 16px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(82, 196, 26, 0.3); /* 按钮初始阴影 */
  transition: all 0.3s ease; /* 动画过渡 */
}

/* 按钮划入上浮效果 */
.submit-btn:hover {
  background-color: #4aa919; /* 深一点的绿色 */
  transform: translateY(-3px); /* 上浮3px */
  box-shadow: 0 8px 16px rgba(82, 196, 26, 0.4); /* 增强阴影 */
  color: white; /* 保持文字颜色 */
}

/* 按钮点击效果 */
.submit-btn:active {
  transform: translateY(-1px); /* 点击时略微下沉 */
  box-shadow: 0 4px 8px rgba(82, 196, 26, 0.3);
}

/* 淡入动画 - 模态框打开时的过渡效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 为模态框添加淡入动画 */
:deep(.custom-modal .ant-modal-content) {
  animation: fadeIn 0.3s ease forwards;
}

/* 优化标签文字样式 */
:deep(.ant-form-item-label > label) {
  font-weight: 500; /* 标签文字加粗 */
  color: #1f2329; /* 深色文字提升可读性 */
  font-size: 15px;
}
</style>
